<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/customStyle.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <style>

        #flash {
            width: 100%;
            height: 400px;
            position: relative;
            margin: 0 auto;
            border: 1px solid black;
            overflow: hidden;
        }

        #flash .button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        #flash .right {
            position: absolute;
            right: 10px;
            top: 170px;
        }

        #flash .left {
            position: absolute;
            left: 10px;
            top: 170px;
        }

        #flash .button span {
            font-size: xx-large;
            font-weight: 700;
            line-height: 50px;
            margin-left: 15px;
            color: rgba(255, 255, 255, 0.5);
        }

        .linkl {
            font-size: 35px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: gray;
        }

        .linkl:hover {
            color: white;
        }

        .link2 {
            font-size: 25px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: gray;
        }

        .link2:hover {
            color: white;
        }

        .db1 {
            height: 9.5%;
        }

        .db1:hover {
            background-color: lightgray;
            color: black;
        }
    </style>
</head>
<body style="background:url('/img/123.jpg');background-size: cover">
<div class="container-fluid" style="height: 100%">
    <div class="row" style="background-color: black;height: 100px;">
        <div class="col-sm-6">
            <img alt="" src="/img/logo.png" style="height: 83px ;
            line-height: 83px;">
            <img alt="" src="/img/234.jpg" style="height: 82px">
        </div>
        <div class="col-sm-3 col-sm-offset-3">
            <a class="linkl" id="community" style="padding: initial">社区 </a>
            <a class="linkl" id="login">登录 </a>
            <a class="linkl" id="regist">注册 </a>
        </div>
    </div>
    <hr color="black" style="height: 3px">
    <div class="row" style="height: 80%">
        <div class="col-sm-2" style="height: 100%;background: black">

            <div style="height: 20%">
                <p style="font-size: 40px;color: white;text-align: center;font-family: 华文楷体">剑侠情缘三 <img
                        src="/img/345.png" style="width: 80%;"></p>
            </div>
            <div style=";height: 80%">
                <hr>
                <div align="center">
                    <a class="link2" href="https://haiman.io/jx3/wiki">成就百科</a>
                </div>
                <hr>
                <div align="center">
                    <a class="link2" href="http://www.jx3pve.com/macro">官方宏库</a>
                </div>
                <hr>
                <div align="center">
                    <a class="link2" href="http://jx3.xoyo.com">官网首页</a>
                </div>
                <hr>
                <div align="center">
                    <a class="link2" href="http://jx3.xoyo.com/gl/">更多攻略</a>
                </div>
            </div>
        </div>
        <div class="col-sm-10" style="height: 100%;">

            <div id="flash">
                <img alt="" src="/img/carousel/1.png" style="width: 100%;height: 400px">
                <img alt="" src="/img/carousel/2.png" style="width: 100%;height: 400px">
                <img alt="" src="/img/carousel/3.png" style="width: 100%;height: 400px">
                <img alt="" src="/img/carousel/4.png" style="width: 100%;height: 400px">
                <div class="button right"><span>></span></div>
                <div class="button left"><span><</span></div>
            </div>


            <div style="background-color: #edefea">
                <p id="stitle">最新文章:</p>
                <img alt="" src="">
                <ul class="list-group">
                </ul>
            </div>
        </div>

    </div>
</div>
<div class="footer footer-margin-top" style="margin-top: 0;background-color: black">
    <div class="container">
        <div class="footer-navbar">
            <a href="https://gitee.com/yzlin499/jquery-jx3strategystation">gitee仓库</a>
            <a href="#">关于我们</a>
        </div>
        <p class="footer-content ">
            CopyRight © 2019 jx3strategystation<br>
            All rights reserved. jx3strategystation 版权所有
        </p>
    </div>
</div>
</body>
<script>

    var count = 0;

    function run() {
        count++;
        count = count === 4 ? 0 : count;
        $('#flash img').eq(count).fadeIn(500).siblings('img').fadeOut(500);
    }

    function reverserun() {
        count--;
        count = count === -1 ? 3 : count;
        $('#flash img').eq(count).fadeIn(500).siblings('img').fadeOut(500);
    }

    var timer = setInterval(run, 1500);
    $('#flash').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(run, 1500);
    });

    $('#flash .right').click(function () {
        run();
    });
    $('#flash .left').click(function () {
        reverserun();
    });


    $("#community").click(function () {
        window.location.href = "community.html"
    })

    $("#login").click(function () {
        window.location.href = "/login.html"
    })

    $("#regist").click(function () {
        window.location.href = "/login.html"
    })


    $("#stitle").css("font-size", "35px")
    $.get("/article/list", function (result) {
        var data = result.data;
        var length = data.length;
        for (var i = 0; i < length; i++) {
            var str = '<li class="list-group-item db1">' + '' +
                '<div class="row">' +
                '<div class="col-sm-9">' +
                '<a href="/article/page.html?articleId=' + data[i].articleId + '" style="font-size: 20px">' + data[i].title + '</a></div>' +
                '<div class="col-sm-12">' +
                '</div></div></li>';
            $(".list-group").append(str);
        }
    })
</script>
</html>
